Terma Snapshot Gallery

Two items visible: 'Apple' and 'Apricot' with 'ap' highlighted in accent color

Only 'Apple' visible (exact case match), lowercase 'apple' and uppercase 'APPLE' filtered out

One item visible: 'JavaScript' with fuzzy-matched characters 'J', 'S', 'c' highlighted

Empty list - no items match the query 'xyz'

All three items visible - empty query shows unfiltered list

Two filtered items with cursor (▶) on 'Apple', both showing 'ap' highlighted

Only 'First (100)' visible - custom matcher filters by Name field only

Two items with 'ap' highlighted in accent color with underline on both 'Apple' and 'Apricot'

Two rows visible: Alice and Charlie, both with 'Engineer' highlighted in the role column

Only first row visible with 'Alice' highlighted - case-sensitive match excludes 'ALICE' row

One row visible: 'JavaScript' with fuzzy-matched characters 'J', 'S', 'c' highlighted

Empty table - no rows match the query 'xyz'

All three rows visible - empty query shows unfiltered table

Two filtered rows with Alice row highlighted (active), both showing 'Engineer' with match highlighting

Header row visible (Name, Role, City) followed by two filtered data rows with 'Engineer' highlighted

Only Alice row visible - custom renderer shows plain text without highlighting

Two rows visible with 'ap' highlighted in accent color in first column of each row

Two items visible with all occurrences of 'apple' highlighted (3x in first item, 1x in second)

Two rows visible: Alice (NYC in city column) and NYC Admin (NYC in both name and city columns)

White 'Hello, World!!' text at top-left. Width auto-sized to 14 characters.

Rich text: 'Bold' in bold, ' and ' in normal, 'Italic' in italic. All white on black, single line.

Long text extends beyond 20-cell boundary, no wrapping. Only first 20 characters visible: 'This is a very long '.

Text wraps at word boundaries within 15-cell width. Multiple lines, words not broken mid-word.

Long word broken at exactly 10 characters per line. Word split mid-character across multiple lines.

Three text rows showing style variations. 'Bold' in bold on row 1, 'Italic' in italic on row 2, 'Underline' underlined on row 3.

White 'Highlighted' text on purple/blue background. Background extends to text width only.

Three lines of text from explicit newlines. 'Line 1' on row 1, 'Line 2' on row 2, 'Line 3' on row 3.

Red/pink 'Colored' text on black background. Text color is RGB(255,100,100).

Button with 'Click Me' label. Default styling, width auto-sized to label.

Button with 'Styled' label. White text on purple background (RGB 100,50,150).

Button 'Wide' with fixed 15-cell width. Label centered within the button area.

List with 3 items vertically stacked. First item 'Item 1' is active (highlighted). Items 2 and 3 below.

List with 3 items. 'Second' (index 1) is active and highlighted. 'First' above, 'Third' below.

Empty list with no items. Should render as empty space with no visible content.

List with custom render showing checkboxes. '[*] A' active on row 1, '[ ] B' and '[ ] C' below.

Multi-select list with items 0 and 2 selected. 'Option 1' and 'Option 3' shown as selected, 'Option 2' unselected.

20-cell progress bar at 0%. Entire bar shows unfilled/empty state.

20-cell progress bar at 50%. Left 10 cells filled, right 10 cells unfilled.

20-cell progress bar at 100%. Entire bar shows filled state.

20-cell progress bar at 75%. Green filled portion (15 cells), dark gray unfilled (5 cells).

20-cell progress bar at 25%. Left 5 cells filled, right 15 cells unfilled.

30-cell row with 'Left' at column 1 and 'Right' at far right. Spacer fills gap between them.

Row with 'A' at column 1, 5-cell fixed gap, then 'B' at column 7. Total width is 7 cells.

10-row column with 'Top' at row 1 and 'Bottom' at row 10. Spacer fills 8 rows between them.

40-cell row with 'A', 'B', 'C' evenly distributed. Two spacers split remaining space equally.

Column with 'Visible' on row 1 (shown because condition is true), 'Always' on row 2.

Column with only 'Always' on row 1. 'Hidden' is removed (condition false), takes no space.

Column with only 'Always' on row 1. 'Hidden' is removed (hide condition true), takes no space.

Column with 'Visible' on row 1 (shown because hide condition is false), 'Always' on row 2.

Only 'Page One' visible (active key is 'page1'). 'Page Two' not rendered.

Only 'Second' visible (active key is 'page2'). 'First' and 'Third' not rendered.

Empty/no content visible. Active key 'nonexistent' doesn't match any child key.

Three text items stacked vertically at top-left. Red 'First' on row 1, green 'Second' on row 2, blue 'Third' on row 3. Each sized to content width.

Blue 'Top' text at row 1 (top edge). Column is 10 rows tall with empty space below the text.

Blue 'Centered' text vertically centered around row 5. Equal empty space above and below.

Blue 'Bottom' text at row 10 (bottom edge). Column is 10 rows tall with empty space above the text.

Blue text background stretches full 20-cell width. Text 'Stretched' left-aligned within the stretched area.

Blue 'Left' text at left edge (column 1). Text width matches content, not stretched. Column is 20 cells wide.

Blue 'CenterH' text horizontally centered in 20-cell column. Equal empty space on left and right.

Blue 'Right' text at right edge of 20-cell column. Empty space on left, text aligned to column 20.

Three items stacked vertically with 2-row gaps. Red 'A' at row 1, green 'B' at row 4, blue 'C' at row 7.

Gray outer column with two nested columns stacked. Red column with 'Nested1' on row 1, blue column with 'Nested2' on row 2.

10-row column with mixed heights. Red 'Fixed' takes 2 rows, green 'Flex' expands to fill 7 rows, blue 'Auto' takes 1 row at bottom.

Three single-char items in a horizontal row. Red 'A' at column 1, green 'B' at column 2, blue 'C' at column 3. All on row 1.

Blue 'Left' text at left edge (column 1). Row is 20 cells wide with empty space to the right.

Blue 'Mid' text horizontally centered in 20-cell row. Equal empty space on left and right.

Blue 'Right' text at right edge of 20-cell row. Empty space on left, text ends at column 20.

Blue background stretches full 5-row height. Text 'Tall' at top within the stretched area.

Blue 'Top' text at row 1 (top edge). Row is 5 rows tall, text height matches content.

Blue 'CenterV' text vertically centered in 5-row container. Equal empty space above and below.

Blue 'Bottom' text at row 5 (bottom edge). Empty space above the text.

Three items in horizontal row with 2-column gaps. Red 'X' at column 1, green 'Y' at column 4, blue 'Z' at column 7.

Gray outer row with two nested rows side by side. Red row with 'Inner1' on left, blue row with 'Inner2' on right.

30-cell row with mixed widths. Red 'Fixed' takes 5 columns, green 'Flex' expands to fill remaining space, blue 'Auto' sized to content.

Red 'Header' docked at top (row 1, full width). Blue 'Body' fills remaining space below.

Red 'Footer' docked at bottom (row 10, full width). Blue 'Body' fills remaining space above.